<template>
	<view class="content p_r">
		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"    @touchmove.stop.prevent="moveHandle" >
			<scroll-view scroll-y="true"  class="sheetView"   :class="{sheetView_active:isShowBottom}"   @click.stop="stopEvent()" >
				<view class="d_f w_100 j_c_c">
					<view class="w_91">
						<view class="d_f w_100 j_c_s_b">
							<view class="topTxt" style="width:20%;"></view>
							<view class="topTxt" style="text-align: center;width:60%;">请选择就诊时间</view>
							<view @click="closeSheet()" class="topTxt d_f  j_c_c" style="width: 20%;text-align:">
								<!-- <uni-icons type="clear" size="20" color="#d5d5d5"></uni-icons> -->
								<text class="txtes"> x</text>
							</view>
						</view>
						<view class="d_f w_100 j_c_c a_i_c">
							<image src="../../static/image/zuo.png" mode="" style="width: 40rpx;height: 40rpx;" @tap.stop="zuoFun"></image>
							<text style="margin-left: 48rpx;font-size: 28rpx;color:#717171">{{dataParm.times}}</text>
							<image src="../../static/image/you.png" mode="" 
								style="width: 40rpx;height: 40rpx;margin-left: 48rpx;" @tap.stop="youFun"></image>
						</view>
						<view class="w_100"style="margin-top: 40rpx;" v-if="dataList">
							<view style="font-size: 28rpx;">上午时段</view>
							<view class="d_f  j_c_s_b f_w_w" style="width: 90%;">
								<view v-for="(item,index) in dataList.shangWu" :key="index" @tap="shangWuFun(item,index)">
									<text :class="item.num>0?'txtTime':'txtTime1'"
										:style="shangWuCount==index?'background-color: #F9FFFE;border: 1rpx solid #24CCB3;color:#24CCB3;':''">
										{{item.time}} 余号{{item.num>=0?item.num:0}}
									</text>
								</view>
							</view>
						</view>
						<view class="w_100" style="margin-top: 40rpx;" v-if="dataList">
							<view style="font-size: 28rpx;">下午时段</view>
							<view class="d_f  j_c_s_b f_w_w" style="width: 90%;">
								<view v-for="(item,index) in dataList.xiaWu" :key="index" @tap="xiaWuFun(item,index)">
									<text :class="item.num>0?'txtTime':'txtTime1'" 
										:style="xiaWuCount==index?'background-color: #F9FFFE;border: 1rpx solid #24CCB3;color:#24CCB3;':''">
										{{item.time}}  余号{{item.num>=0?item.num:0}}
									</text>
								</view>
								
							</view>
						</view>	
					</view>
				</view>
				<!-- 底部确认 -->
				<view class="w_100" style="background-color: #FFFFFF;height: 104rpx;margin-top: 50rpx;" v-if="dataList">
					<view class="w_100 d_f j_c_c a_i_c" style="height: 100%;">
						<view class="w_91 box_s" @tap.stop="comiFun">
							确认
						</view>
					</view>
				</view>
				<view class="d_f j_c_c w_100" style="margin-top: 200rpx;font-size: 30rpx;color: #D5D5D5;" v-if="dataList=={}">
					
					--&nbsp&nbsp今天没有医生可预约哦！！&nbsp&nbsp--
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		name : "bottomSheet",
		props: {
			dataList:Object,
			isShowBottom : Boolean,
			
		},
		data() {
			let year = new Date().getFullYear();
			let month = new Date().getMonth()+1;
			let date = new Date().getDate();
			return {
				dataParm:{
					receiveTime:"",
					times:year+'-'+month+'-'+date,
				},
				
				outTime:new Date(),
				shangWuCount:null,
				xiaWuCount:null,
			}
		},
	
		methods: {
			closeSheet(){					
				this.$emit('closeBottom');
			},
			stopEvent(){						//@click.stop防止事件冒泡
				
			},
			moveHandle(){						//不让页面滚动
				
			},
			shangWuFun(item,index){
				if(item.num>0){
					this.xiaWuCount = null;
					this.shangWuCount =index;
					this.dataParm.receiveTime = item.time;
				}
				
			},
			xiaWuFun(item,index){
				if(item.num>0){
					this.shangWuCount = null;
					this.xiaWuCount =index;
					this.dataParm.receiveTime = item.time
				}
				
			},
			youFun(){
				this.shangWuCount=null;
				var dateTime = new Date(this.outTime); 
				dateTime=dateTime.setDate(dateTime.getDate()+1);
				this.outTime = dateTime
				this.dataParm.times= this.tis(new Date(dateTime))
				this.$emit("youFun",this.dataParm.times)
			}, 
			zuoFun(){
				this.xiaWuCount=null;
				var dateTime = new Date(this.outTime); 
				dateTime=dateTime.setDate(dateTime.getDate()-1);
				var a = new Date().toLocaleDateString()
				if(dateTime<new Date(a).getTime())return 
				this.outTime=dateTime
				this.dataParm.times=this.tis(new Date(dateTime));
				this.$emit("youFun",this.dataParm.times)
			},
			// 确认
			comiFun(){
				if(!this.dataParm.receiveTime)return this.$funs.show("请选择时间段",0)
				this.$emit("comiFun",this.dataParm)
			},
			tis(val){
				let year = val.getFullYear()
				let month = val.getMonth()+1
				let date = val.getDate()
				return year+'-'+month+'-'+date;
			}
			
		}
	}
</script>

<style>
	/* sheet弹窗 */
	.sheet{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 120%;
		left: 0upx;
		bottom: 0upx;
		right: 0upx;
		background:rgba(0,0,0,0.5);
		z-index: 1000;
	}
	
	/* 显示时候的动画默认0.5s */ 
	.sheetView{
		width: 100%;
		height: 0upx;
		position: absolute;
		bottom: 0upx;
		background: white;
		z-index: 10001;
		transition: all 0.5s;
	}
	.sheetShow{
		top:0upx !important;
	}
	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide{
		top:120% !important;
		transition: all 0.5s;		
	}
	
	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active{
		height: 846upx;
		border-top-right-radius:18rpx ;
		border-top-left-radius:18rpx ;
	}
	.topTxt{
		height: 80rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
		color:#282828;
	}
	.txtes{
		display: block;
		text-align: center;
		 width: 40rpx;
		 height: 40rpx;
		 line-height: 40rpx;
		 border-radius: 50%;
		 color: #d5d5d5;
		 background-color: #a1a1a1;
	}
	.txtTime{
		display: block;
		width: 282rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 30rpx;
		font-size: 24rpx;
		color:#5E5E5E;
		margin-top: 30rpx;
		background-color: #EEF0F5;
		border: 1rpx solid #EEF0F5;
	}
	.txtTime1{
		display: block;
		width: 282rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 30rpx;
		font-size: 24rpx;
		color:#BFBFBF;
		margin-top: 30rpx;
		background-color: #F3F4F7;
		border: 1rpx solid #F3F4F7;
		
	}
	.box_s{
		background: linear-gradient(to right,#2AD3BA,#87F4D0);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color:#FFFFFF;
		font-size: 34rpx;
		height: 80rpx;
		
	}
</style>
